<template>
  <div class="home">
    <scroll class="scroll-widget" ref="scroll">
      <swiper :homeSwiperImgs="homeSwiperImgs" @imgLoad="homeImgLoad"></swiper>
      <recommend :recommends="recommends"></recommend>
      <feature></feature>
      <goods-list :title="titleType" :goodsType="goodsType" @activeType="getType" :getGoodsData="GoodsList[goodsType].list"></goods-list>
      <ul> 
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
      </ul>
    </scroll>
  </div>
</template>
<script>
// @ is an alias to /src
import Scroll from "@/components/common/scroll/Scroll"
import Swiper from "@/views/home/childComps/Swiper"
import Recommend from "@/views/home/childComps/Recommend"
import Feature from "@/views/home/childComps/Feature"
import GoodsList from "@/views/home/childComps/Goodslist"

import {getHomeMultidata, getHomeData} from "@/network/home"

export default {
  name: 'home',
  components: {
    Scroll,
    Swiper,
    Recommend,
    Feature,
    GoodsList
  },
  data() {
    return {
      homeSwiperImgs: [],//banner图
      recommends: [],//推荐
      titleType: ['流行','热销','新款'],
      goodsType: 0,
      GoodsList: [
        {type: 'pop', list: [], page: 1},
        {type: 'sell', list: [], page: 1},
        {type: 'new', list: [], page: 1}
      ],//分类商品
    }
  },
  created() {
    //获取banner图
    getHomeMultidata().then( res => {
      this.homeSwiperImgs = res.data.banner.list;
      this.recommends = res.data.recommend.list;
    })
    this.getGoodsList();
  },
  methods: {
    getType(type) {
      this.goodsType = type;
      this.getGoodsList();
    },
    getGoodsList() {
    	getHomeData(this.GoodsList[this.goodsType].type, this.GoodsList[this.goodsType].page).then( res => {
	      this.GoodsList[this.goodsType].list = res.data.list;
	    })
    },
    homeImgLoad(data) {
      if(data){
        this.$refs.scroll.scroll.refresh();
      }
    }
  },
  computed: {
    getGoodsData() {
      return this.GoodsList[this.goodsType].list;
    }
  }
}
</script>
<style>
@import "./Home.css";

.scroll-widget{
  position: absolute;
  top: 50px;
  right: 0px;
  bottom:45px;
  left: 0px;
  overflow: hidden;
}
</style>
